<template>
  <div>

    <myheader></myheader>

    <main class="" id="main-collapse">

      <div class="hero-full-wrapper">
        <div class="grid">
          <div class="gutter-sizer"></div>
          <div class="grid-sizer"></div>

          <!-- 面包屑导航 -->
          <!--<Breadcrumb :datas="datas"></Breadcrumb>-->
          <bread :datas="this.datas"></bread>

          <br>

          <Form>
            <FormItem label="用户名：">
              <input type="text" v-model="username">

            </FormItem>

            <FormItem label="密码：">
              <input type="password" v-model="password">

            </FormItem>

            <FormItem>
              <Button @click="submit" :loading="isLoading" color="primary">登录</Button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <img src="http://127.0.0.1:8000/static/sina.png" @click="sina">
              &nbsp;&nbsp;&nbsp;&nbsp;
              <img src="http://127.0.0.1:8000/static/dingding.png" @click="dingding">
            </FormItem>

          </Form>
        </div>
      </div>


    </main>


  </div>

</template>


<script>
  // 导入头部组件
  import myheader from "./myheader.vue";
  // 导入面包屑组件
  import bread from './bread'

  export default {
    data() {
      return {
        msg: "这是一个变量",
        datalist: [],
        // 用户名
        username: '',
        // 密码
        password: '',
        // 是否加载进度条
        isLoading: false,
        // 面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '用户登录'}]
      }
    },

    // 组件化
    components: {
      'myheader': myheader,
      'bread': bread
    },

    mounted: function () {


    },

    methods: {
      // 跳转钉钉登录
      dingding: function () {
        // 应用id
        let appid = 'dingoahmelrgy51wltnjzs'
        // 回调网址
        let redirect_url = 'http://localhost:8000/dingding_back/'

        let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoahmelrgy51wltnjzs&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8000/dingding_back'

        window.location.href = url

      },

      // 跳转新浪登录
      sina: function () {
        // client_id 应用id
        let client_id = '2636039333'
        // redirect_uri 回调网址
        let redirect_uri=http://127.0.0.1:8000/md_admin/weibo'

        // 拼接新浪url
        let url = 'https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo';

        // 进行站外跳转
        window.location.href = url
      },

      // 提交方法
      submit: function () {
        // 显示进度条
        this.isLoading = true;
        if (this.username == '') {
          this.$Message('用户名不能为空')
        }
        if (this.password == '') {
          this.$Message('密码不能为空')
          // 关闭进度条
          this.isLoading = false;
          return
        }
        //发送异步请求
        this.axios.get('http://localhost:8000/login/', {
          params: {
            username: this.username,
            password: this.password
          }
        }).then((res) => {
          console.log(res);

          // 判断结果
          if (res.data.code == 200) {
            localStorage.setItem('username', res.data.username)
            localStorage.setItem('uid', res.data.uid)

            // 跳转页面
            this.$router.push('/')
          } else {
            this.$Message(res.data.message)
          }
          // 关闭进度条
          this.isLoading = false;
        })

      },
      // 重置方法
      reset: function () {
        // 进行重置
        this.username = '';
        this.password = '';
      }

    }
  }


</script>

<style>


</style>
